<template>
	<div class="wraper" :class="{padTop:isIphoneX,iphone:isIphone}">
		<div class="line"></div>
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
		</div>
		<div class="content">
			<h1>{{$t('mySetting-key7')}}</h1>
			<div class="title">{{$t('mySetting-key8')}}</div>
			<div class="item">
				<input type="text" v-model="nickName" maxlength="20" :placeholder="$t('mySetting-key9')">
				<span>{{nickName.length}}/20</span>
			</div>
		</div>
		<div class="btns">
			<van-button 
				@click="goBack" 
				class="cancel" 
				type="primary" 
				color="#ABBFCC">
				{{$t('cancel')}}
			</van-button>
			<van-button 
				@click="confirm" 
				:loading-text="$t('mySetting-key10')" 
				:loading="btnLoading" 
				class="confirm" 
				type="primary" 
				color="#1C4D7F">
				{{$t('confirm')}}
			</van-button>
		</div>
		<div class="edit-left-slide" @click="clickLeft"></div>
		<div class="edit-right-slide" @click="clicRight"></div>
	</div>
</template>
<script src="./editNickName.js"></script>
<style scoped>
	@import './editNickName.css';
</style>